<template>
  <div class="orderList">
    <load :state="loading"></load>
    <van-tabs v-model="active" @click="onTabClick" style="width: 100%" class="new-list">
      <van-tab title="全部"></van-tab>
      <van-tab title="待发货"></van-tab>
      <van-tab title="待收货"></van-tab>
      <van-tab title="已收货"></van-tab>
    </van-tabs>
    <div class="space"></div>
    <van-list v-model="load" :finished="LastData[active]" @load="loadMore(active)">
      <itemOrder
        @onItemCLick="handleItemClick"
        v-for="(item, index) in orderList[active]"
        :key="index"
        :index="index"
        :item-obj="item"
        :type="type"
        :orderType="orderType"
        :tradeStatus=item.status
      />
    </van-list>
    <p v-show="LastData[active]" class="no-more">没有啦呀</p>
  </div>
</template>

<script type="text/ecmascript-6">
  import Public from '@/assets/js/public';
  import OrderType from './OrderType';
  import Load from '../../components/common/load/load';
  import ItemOrder from '../../components/order/itemOrder';

  export default {
    /** kebab-case */
    name: 'orderList',
    data: function () {
      return {
        LoadData: [],
        LastData: [],
        active: 0,
        type: OrderType.All, // 订单状态类型
        loading: false,
        load: false, // 底部上拉加载
        orderType: 'normal', // 订单类型
        pages: [],
        orderList: []
      };
    },
    props: {},
    created() {
      if (this.$route.query.orderType) {
        // 从订单详情返回
        this.type = this.$route.query.orderType;
      }
      this.orderList = new Array(4).fill([]);
      this.pages = new Array(4).fill(0);
      this.LoadData = new Array(4).fill(true);
      this.LastData = new Array(4).fill(false);
      this.loadMore(this.active);
    },
    components: {
      ItemOrder,
      Load
    },

    methods: {
      getIcon(icon) {
        return Public.ossImg + icon + '.svg';
      },
      handleItemClick(index) {
        this.$router.push({
          name: 'order-details',
          query: {
            id: this.orderList[this.active][index].id,
            status: this.orderList[this.active][index].status
          }
        });
      },
      onTabClick(index) {
        this.active = index;
        switch (index) {
          case 0:
            this.type = OrderType.All;
            break;
          case 1:
            this.type = OrderType.Pay;
            break;
          case 2:
            this.type = OrderType.Send;
            break;
          case 3:
            this.type = OrderType.Receive;
            break;
        }
        if (this.pages[index] === 0) {
          this.loadMore(index);
        }
      },
      loadMore(index) {
        // this.orderList = [
        //     [{
        //         goods: [
        //             {
        //                 title: '新款花仙子草莓双层生日蛋糕新款花仙子草莓双层生日蛋糕',
        //                 nid: '椰果夹心，8寸',
        //                 pic: 'http://img.sx.ishangtui.com/image/77406_5b6ae00d6855a.png'
        //             }
        //         ],
        //         created: '1538988038',
        //         id: '123805',
        //         money: '96.00',
        //         rec_area: '卢湾区',
        //         rec_city: '上海市',
        //         rec_detail: '水电费来看是否',
        //         rec_phone: '13856242312',
        //         rec_province: '上海市',
        //         rec_temp_user: '123',
        //         rec_user: '测试',
        //         remark: '',
        //         status: 'wait_pay',
        //         travel_fee: '0.00',
        //         type: 'normal',
        //         uid: '517'
        //     }]
        // ];
        if (this.LoadData[index] === true) {
          this.load = true;
          this.LoadData[index] = false;
          // 获取订单列表接口
          this.$Spread.getNewUserOrder({
            type: 'normal',
            status: this.type,
            page: this.pages[index],
            size: '10'
          }).then(res => {
            this.orderList[index] = this.orderList[index].concat(res.data);
            this.pages[index]++;
            this.loading = false;
            this.load = false;
            // 没有数据了
            let DataNum = res.data.length;
            if (DataNum < 10) {
              this.LoadData[index] = false;
              this.LastData[index] = true;
              return false;
            } else {
              //  打开查询数据接口
              this.LoadData[index] = true;
            }
          }, () => {
            this.loading = false;
          });
        }
      }
    },
    computed: {},
    watch: {}
  };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../../assets/stylus/main.styl";
  .no-more {
    word-vw(12, third-ash);
    flex-center();
    margin-top 10px
    margin-bottom: 30vw;
  }

  .flex-r
    flex-x()

  .flex-c
    flex-y()

  .center
    flex-center()

  .divider
    divider()

  .space
    space()

  .van-tab--active
    color #000000

  >>> .van-tabs__line
    left: -8px
</style>
